/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { defineComponent, PropType, computed, inject } from 'vue';
import { IPanelCtrlPos } from '@ibiz/model-core';
import { CTX, IControlController } from '@ibiz-template/runtime';
import { useNamespace } from '@ibiz-template/vue3-util';
import { PanelCtrlPosTabExpController } from './panel-ctrl-pos-tab-exp.controller';
import './panel-ctrl-pos-tab-exp.scss';

export const PanelCtrlPosTabExp = defineComponent({
  name: 'IBizPanelCtrlPosTabExp',
  props: {
    modelData: {
      type: Object as PropType<IPanelCtrlPos>,
      required: true,
    },
    controller: {
      type: Object as PropType<PanelCtrlPosTabExpController>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('panel-ctrl-pos-tab-exp');

    /**
     * 激活分页
     */
    const activeTab = computed(() => {
      const { state } = props.controller;
      return state.tabs.find(tab => tab.id === state.activeTabKey);
    });

    const ctx = inject('ctx') as CTX;
    ctx.evt.on('onRegister', (name, c) => {
      if (name === activeTab.value?.ctrlModel.name) {
        props.controller.bindControl(c as IControlController);
      }
    });

    /**
     * @description 绘制部件
     * @returns {*}
     */
    const renderCtrl = () => {
      if (!activeTab.value) return;
      return (
        <iBizControlShell
          isCacheMode={true}
          key={activeTab.value.id}
          params={activeTab.value.params}
          context={activeTab.value.context}
          modelData={activeTab.value.ctrlModel}
        />
      );
    };
    return { ns, renderCtrl };
  },
  render() {
    const { state } = this.controller;
    return (
      <div
        class={[
          this.ns.b(),
          this.ns.m(this.modelData.id),
          ...this.controller.containerClass,
          this.ns.is('hidden', !state.visible || !state.tabs.length),
        ]}
      >
        <div class={this.ns.e('header')}>
          <el-tabs
            closable
            type='card'
            v-model={state.activeTabKey}
            class={[this.ns.e('tabs'), this.ns.em('header', 'left')]}
            onTabRemove={(key: string) => this.controller.removeTabNav(key)}
          >
            {state.tabs.map(tab => {
              return (
                <el-tab-pane
                  name={tab.id}
                  label={tab.name}
                  class={this.ns.e('tab-item')}
                />
              );
            })}
          </el-tabs>
          <el-button
            size='small'
            type='primary'
            class={[this.ns.e('action'), this.ns.em('header', 'right')]}
            onClick={() => this.controller.removeOtherTabNav()}
          >
            {ibiz.i18n.t('panelComponent.navTabs.closeOther')}
          </el-button>
        </div>
        <div class={this.ns.e('content')}>
          {state.cache ? (
            <keepAlive include={state.cacheKeys} max={30} isKey>
              {this.renderCtrl()}
            </keepAlive>
          ) : (
            this.renderCtrl()
          )}
        </div>
      </div>
    );
  },
});
